<template>
  <div class="topnav" :class="{docTopnav: toggleMenuButtonVisible}">
    <router-link class="logo" to="/">
      <svg class="icon">
        <use xlink:href="#icon-moon" />
      </svg>
    </router-link>
    <ul class="menu">
      <li>
        <router-link to="/doc">文档</router-link>
      </li>
    </ul>
    <span v-if="toggleMenuButtonVisible" class="toggleAside" @click="toggleMenu">
      <svg class="icon">
        <use xlink:href="#icon-menu" />
      </svg>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    menuVisible: {
      type: Boolean
    },
    toggleMenuButtonVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleMenu: function () {
      this.$emit('clickEvent')
    }
  }
}
</script>

<style lang="scss" scoped>
$color: #0fc0b9;
.docTopnav {
  position: fixed;
  background: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}
.topnav {
  color: $color;
  display: flex;
  padding: 16px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  > .logo {
    max-width: 6em;
    margin-right: auto;
    > {
      svg {
        width: 32px;
        height: 32px;
      }
    }
  }
  > .menu {
    display: flex;
    white-space: nowrap;
    flex-wrap: nowrap;
    > li {
      margin: 0 1em;
    }
  }
  > .toggleAside {
    > {
      svg {
        color: black;
      }
    }
    width: 32px;
    height: 32px;
    font-size: 24px;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
  }
  @media (max-width: 500px) {
    > .menu {
      display: none;
    }
    > .logo {
      margin: 0 auto;
    }
    > .toggleAside {
      display: inline-block;
    }
  }
}
</style>
